<template>
  <el-card class="category">
    <el-form  :inline="true">
      <!-- 一级分类 -->
      <el-form-item label="一级分类">
        <el-select :disabled="scene !== 0" @change="handler" placeholder="请选择分类" v-model="categoryStore.c1Id">
          <el-option v-for="c1 in categoryStore.c1Arr" :key="c1.id" :label="c1.name" :value="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 二级分类 -->
      <el-form-item label="二级分类">
        <el-select :disabled="scene !== 0" @change="handler2" placeholder="请选择分类" v-model="categoryStore.c2Id">
          <el-option v-for="c2 in categoryStore.c2Arr" :key="c2.id" :label="c2.name" :value="c2.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 三级分类 -->
      <el-form-item label="三级分类">
        <el-select :disabled="scene !== 0"  placeholder="请选择分类" v-model="categoryStore.c3Id">
          <el-option v-for="c3 in categoryStore.c3Arr" :key="c3.id" :label="c3.name" :value="c3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useCategoryStore } from '@/store/modules/category'
// 获取一级分类
// c1 c2 c3的id 如果存储在子组件 得子->父传数据 自定义事件 不如数据全部放在pinia方便
// const c1Arr = ref<any>([])
// const c1Id = ref<number|string>('')
// const getC1 = async () => {
//   const res = await reqC1()
//   if(res.code == 200) {
//     c1Arr.value = res.data
//   }
// }

const categoryStore = useCategoryStore()

// 通知仓库 获取一级分类
const getC1 = () => {
  categoryStore.getC1()
}

// 一级分类select change事件
const handler = () => {
  // 通知仓库获取二级分类数据
  // 一级分类变化 要清除二级三级数据
  categoryStore.c2Id = ''
  categoryStore.c2Arr = []
  categoryStore.c3Id = ''
  categoryStore.c3Arr = []
  categoryStore.getC2()
}

// 二级分类select change事件
const handler2 = () => {
   // 2级分类变化 要清除3三级数据
    categoryStore.c3Id = ''
    categoryStore.c3Arr = []
  // 通知仓库获取三级分类数据
  categoryStore.getC3()
}

onMounted(()=>{
  getC1()
})

defineProps<{
  scene: number
}>()


</script>

<style lang="scss">
.category {
  .el-input {
  --el-input-width: 200px;
  }

  .el-select {
    --el-select-width: 200px;
  }
}
</style>
